<template>
  <van-popup v-model:show="showPopup" position="right" destroy-on-close :style="{ width: '100%', height: '100%' }" teleport="body">
    <van-nav-bar title="交易日志" fixed @click-right="showPopup = false">
      <template #right>
        <van-icon name="cross" size="18" />
      </template>
    </van-nav-bar>
    <div class="search-wrapper">
      <div class="van-search van-search--show-action">
        <div class="van-search__content van-search__content--square">
          <van-field v-model="logParams.transactionDate" readonly placeholder="点击选择时间" class="search-input" @click="showDatePicker = true">
            <template #left-icon>
              <van-icon name="calendar-o" color="var(--van-search-left-icon-color)" />
            </template>
          </van-field>
          <van-popup v-model:show="showDatePicker" destroy-on-close position="bottom">
            <van-date-picker :model-value="pickerValue" title="选择日期" @confirm="onDatePickerConfirm" @cancel="showDatePicker = false" />
          </van-popup>
        </div>
        <div class="van-search__action" @click="getLogList()">
          <div class="search-btn">搜索</div>
        </div>
      </div>
    </div>
    <div class="log-wrapper">
      <van-empty v-if="logList.length === 0" image="search" description="没有搜索到交易日志哦~" />
      <van-cell-group v-else>
        <van-cell v-for="item in logList" :key="item.id" title="">
          <template #label v-if="item.transactionType === 1 || item.transactionType === 2">
            <div class="trade-wrapper">
              <div class="trade-type">
                <van-tag v-if="item.transactionType === 1" type="primary">买入</van-tag>
                <van-tag v-if="item.transactionType === 2" type="danger">卖出</van-tag>
              </div>
              <div class="trade-info">
                <div class="trade-info-item">
                  <div class="trade-info-label">{{ item.transactionType === 1 ? '买入' : '卖出' }}日期：</div>
                  <div class="trade-info-value">{{ dayjs(item.transactionDate).format('YYYY-MM-DD') }}</div>
                </div>
                <div class="trade-info-item">
                  <div class="trade-info-label">{{ item.transactionType === 1 ? '买入' : '卖出' }}金额：</div>
                  <div class="trade-info-value bold">{{ formatAmountBySize(Math.abs(item.transactionAmount)) }}{{ formatAmountTextBySize(Math.abs(item.transactionAmount)) }}</div>
                </div>
                <div class="trade-info-item">
                  <div class="trade-info-label">{{ item.transactionType === 1 ? '买入' : '卖出' }}份额：</div>
                  <div class="trade-info-value bold">{{ Math.abs(item.transactionUnits) }}份</div>
                </div>
              </div>
              <template v-if="item.transactionType === 2">
                <div class="content-item income-loss">
                  <div class="content-item-value" :class="item.symbol === '' ? '' : item.symbol === '+' ? 'income' : 'loss'">
                    <span>{{ item.symbol }}</span>
                    <span>{{ formatAmountBySize(Math.abs(item.profitLossAmount)) }}</span>
                    <span class="unit">{{ formatAmountTextBySize(Math.abs(item.profitLossAmount)) }}</span>
                  </div>
                  <div class="content-item-title">盈亏金额</div>
                </div>
              </template>
              <div class="content-item net-value">
                <div class="content-item-value">
                  <span>{{ item.transactionNetValue }}</span>
                </div>
                <div class="content-item-title">成交净值</div>
              </div>
            </div>
          </template>
          <template #label v-if="item.transactionType === 3 || item.transactionType === 4">
            <div class="trade-wrapper">
              <div class="trade-type">
                <van-tag v-if="item.transactionType === 3" type="danger">分红再投</van-tag>
                <van-tag v-if="item.transactionType === 4" type="danger">分红</van-tag>
              </div>
              <div class="trade-info">
                <div class="trade-info-item">
                  <div class="trade-info-label">{{ item.transactionType === 3 ? '再投' : '分红' }}日期：</div>
                  <div class="trade-info-value">{{ dayjs(item.transactionDate).format('YYYY-MM-DD') }}</div>
                </div>
                <div class="trade-info-item">
                  <div class="trade-info-label">{{ item.transactionType === 3 ? '再投' : '分红' }}份额：</div>
                  <div class="trade-info-value bold">{{ Math.abs(item.transactionUnits) }}份</div>
                </div>
              </div>
            </div>
          </template>
        </van-cell>
        <van-pagination v-if="logTotal > logParams.rows" v-model="logParams.page" :total-items="logTotal" :items-per-page="logParams.rows" :show-page-size="5" force-ellipses @change="getLogList" />
      </van-cell-group>
    </div>
  </van-popup>
</template>

<script setup>
import { ref } from 'vue'
import { apiGetProductTradeLog } from '@/api/product'
import dayjs from 'dayjs'
import { formatAmountBySize, formatAmountTextBySize } from '@/utils/common'

const showPopup = ref(false)
const form = ref({})
const showDatePicker = ref(false)
const pickerValue = ref([])
const logList = ref([])
const logTotal = ref(0)

const logParams = ref({
  page: 1,
  rows: 10,
  productId: '',
  transactionDate: ''
})

const open = (product) => {
  form.value = product
  logParams.value.productId = product.id
  logParams.value.transactionDate = ''
  pickerValue.value = [dayjs().get('year'), dayjs().get('month') + 1, dayjs().get('date')]
  getLogList()
  showPopup.value = true
}

const onDatePickerConfirm = ({ selectedValues }) => {
  logParams.value.transactionDate = selectedValues.join('/')
  pickerValue.value = selectedValues
  showDatePicker.value = false
  getLogList()
}

const getLogList = async (page = 1) => {
  logParams.value.page = page
  const params = {
    ...logParams.value,
    transactionDate: logParams.value.transactionDate ? dayjs(logParams.value.transactionDate).format('YYYY-MM-DD') : ''
  }
  apiGetProductTradeLog(params).then((res) => {
    res.list.forEach((item) => {
      item.symbol = !item.profitLossAmount ? '' : item.profitLossAmount > 0 ? '+' : '-'
    })
    logList.value = res.list
    logTotal.value = res.total
  })
}

defineExpose({
  open
})
</script>

<style lang="less" scoped>
.search-wrapper {
  position: fixed;
  top: var(--van-nav-bar-height);
  left: 0;
  right: 0;
  z-index: 1;
  .search-input {
    background: transparent;
    padding: 5px 10px;
  }
  .search-btn {
    padding-right: 4px;
  }
}
.log-wrapper {
  padding-top: 100px;
  height: calc(100vh - 100px);
  overflow-y: auto;
  .bold {
    font-weight: bold;
  }
  .trade-wrapper {
    display: flex;
    align-items: center;
    color: #323232;
    .trade-info {
      flex: 1;
      margin: 0 0 0 10px;
      .trade-info-item {
        display: flex;
        align-items: center;
        font-size: 12px;
        .trade-info-value {
          width: 70px;
          white-space: nowrap;
        }
      }
    }
    .content-item {
      text-align: center;
      height: 100%;
      &.net-value {
        min-width: 55px;
      }
      &.income-loss {
        margin-right: 8px;
        min-width: 80px;
      }

      .content-item-title {
        margin-top: 4px;
      }

      .content-item-value {
        display: flex;
        align-items: baseline;
        justify-content: center;
        font-size: 18px;
        height: 16px;
        line-height: 16px;
        font-weight: bold;

        .unit {
          font-size: 12px;
          margin-left: 2px;
        }

        &.loss {
          color: #43c07d;
        }

        &.income {
          color: #f53f3f;
        }
      }
    }
  }
}
</style>
